<template>
  <div class="bottom-div">
    <div class="left-content" :style="{ backgroundColor: leftColor }">
      <p v-show="showText">{{ leftText }}</p>
    </div>
    <div class="right-content" :style="{ backgroundColor: rightColor }">
      <p v-show="showText">{{ rightText }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeaderBottom',
  props: {
    leftColor: {
      type: String,
      default: '#5995ff' // Default color for left side
    },
    leftText: {
      type: String,
      default: ''
    },
    rightColor: {
      type: String,
      default: '#2c5fdf' // Default color for right side
    },
    rightText: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      showText: true
    }
  },
  methods: {
    handleScroll (event) {
      // 获取滚动距离
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0
      // 判断是否滚动到顶部，如果滚动到顶部则显示文字，否则隐藏文字
      this.showText = (scrollTop === 0)
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  }
}
</script>

<style scoped>
.bottom-div {
  position: relative; /* 相对定位 */
  top: 80px; /* 与 Header 的高度相等 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 左侧内容的样式 */
.left-content {
  flex: 1;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 右侧内容的样式 */
.right-content {
  flex: 3;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 左内容中的文本样式 */
.left-content p{
  margin: 0;
  font-size: 30px; /* 设置适合的字体大小 */
  text-align: center;
  color: black; /* 文字颜色 */
  font-family: Georgia, serif;;
}
/* 右内容中的文本样式 */
.right-content p {
  margin: 0;
  font-size: 60px; /* 设置适合的字体大小 */
  text-align: center;
  color: white; /* 文字颜色 */
  font-family: cursive;
  text-shadow: 2px 4px 6px rgba(0, 0, 0, 1); /* 添加阴影效果 */
  font-weight: bold;
}
</style>
